<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
<link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css"
    type="text/css"
/>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<div id="map"></div>

<script>
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-87.6244, 41.8756],
        zoom: 13
    });

    var customData = {
        'features': [
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Lincoln Park',
                    'description':
                        'A northside park that is home to the Lincoln Park Zoo'
                },
                'geometry': {
                    'coordinates': [-87.637596, 41.940403],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Burnham Park',
                    'description': "A lakefront park on Chicago's south side"
                },
                'geometry': {
                    'coordinates': [-87.603735, 41.829985],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Millennium Park',
                    'description':
                        'A downtown park known for its art installations and unique architecture'
                },
                'geometry': {
                    'coordinates': [-87.622554, 41.882534],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Grant Park',
                    'description':
                        "A downtown park that is the site of many of Chicago's favorite festivals and events"
                },
                'geometry': {
                    'coordinates': [-87.619185, 41.876367],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Humboldt Park',
                    'description': "A large park on Chicago's northwest side"
                },
                'geometry': {
                    'coordinates': [-87.70199, 41.905423],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Douglas Park',
                    'description':
                        "A large park near in Chicago's North Lawndale neighborhood"
                },
                'geometry': {
                    'coordinates': [-87.699329, 41.860092],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Calumet Park',
                    'description':
                        'A park on the Illinois-Indiana border featuring a historic fieldhouse'
                },
                'geometry': {
                    'coordinates': [-87.530221, 41.715515],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Jackson Park',
                    'description':
                        "A lakeside park that was the site of the 1893 World's Fair"
                },
                'geometry': {
                    'coordinates': [-87.580389, 41.783185],
                    'type': 'Point'
                }
            },
            {
                'type': 'Feature',
                'properties': {
                    'title': 'Columbus Park',
                    'description':
                        "A large park in Chicago's Austin neighborhood"
                },
                'geometry': {
                    'coordinates': [-87.769775, 41.873683],
                    'type': 'Point'
                }
            }
        ],
        'type': 'FeatureCollection'
    };

    function forwardGeocoder(query) {
        var matchingFeatures = [];
        for (var i = 0; i < customData.features.length; i++) {
            var feature = customData.features[i];
            // handle queries with different capitalization than the source data by calling toLowerCase()
            if (
                feature.properties.title
                    .toLowerCase()
                    .search(query.toLowerCase()) !== -1
            ) {
                // add a tree emoji as a prefix for custom data results
                // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
                feature['place_name'] = '🌲 ' + feature.properties.title;
                feature['center'] = feature.geometry.coordinates;
                feature['place_type'] = ['park'];
                matchingFeatures.push(feature);
            }
        }
        return matchingFeatures;
    }

    map.addControl(
        new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            localGeocoder: forwardGeocoder,
            zoom: 14,
            placeholder: 'Enter search e.g. Lincoln Park',
            mapboxgl: mapboxgl
        })
    );
</script>
